<template>
  <view class="my-page">
    <!-- 头部用户信息区域 -->
    <view class="user-header">
      <image class="user-avatar" :src="avatar" mode="cover"></image>
      <text class="user-name">{{ userName }}</text>
      <text class="edit-info" v-if="isLoggedIn">编辑个人资料▶</text>
      <button class="logout-btn" v-if="isLoggedIn" @click="handleLogout">退出登录</button>
      <button class="login-btn" v-else @click="handleLogin">登录</button>
    </view>


    <!-- 功能菜单区域 -->
    <view class="menu-list">
      <view class="menu-item" v-for="(item, index) in menuList" :key="index" @click="handleMenuClick(item)">
		<image :src="item.icon" mode="" style="width: 50px;height: 50px;"></image>
        <text class="menu-text">{{ item.text }}</text>
      </view>
    </view>

    <!-- 底部欢迎语 -->
    <view class="welcome-text">欢迎访问仓库 <text class="highlight">同学们！！！</text></view>


  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';

// 用户信息
const avatar = ref('/static/imgicon/3.jpg'); // 默认头像
const userName = ref('请登录'); // 默认用户名
const isLoggedIn = ref(false); // 登录状态

// 菜单列表数据
const menuList = ref([
  { icon: '/static/img/shoucang.png', text: '我的收藏' },
  { icon: '/static/img/shouyegory.png', text: '我的出租' },
  { icon: '/static/img/jilu.png', text: '看房记录' },
  { icon: '/static/img/fangzhufangdong.png', text: '成为房主' },
  { icon: '/static/img/wodegory.png', text: '个人资料' },
  { icon: '/static/img/lianxiwomen.png', text: '联系我们' },
]);

// 检查登录状态
const checkLoginStatus = () => {
  const token = uni.getStorageSync('token');
  const nickname = uni.getStorageSync('nickname');
  
  if (token && nickname) {
    isLoggedIn.value = true;
    userName.value = nickname;
    // 这里可以根据实际情况设置头像，现在使用随机头像
    const randomImg = Math.floor(Math.random() * 5) + 1;
    avatar.value = `/static/imgicon/${randomImg}.jpg`;
  } else {
    isLoggedIn.value = false;
    userName.value = '请登录';
    avatar.value = '/static/imgicon/3.jpg';
  }
};

// 页面加载时检查登录状态
onMounted(() => {
  checkLoginStatus();
});

// 页面显示时检查登录状态（解决登录后实时更新问题）
onShow(() => {
  checkLoginStatus();
});



// 菜单点击处理函数
const handleMenuClick = (item) => {
  // 检查是否需要登录的功能
  const needLoginItems = ['我的收藏', '看房记录', '我的出租', '个人资料'];
  
  if (needLoginItems.includes(item.text) && !isLoggedIn.value) {
    uni.showToast({
      title: '请先登录',
      icon: 'none'
    });
    handleLogin();
    return;
  }
  
  if (item.text === '我的收藏') {
    // 跳转到收藏页面
    uni.navigateTo({
      url: '/ulit/shoucang/shoucang'
    });
  }else if(item.text === '看房记录'){
	  uni.navigateTo({
		url:"/ulit/jilu/jilu"
	  })
  }else if(item.text === '我的出租'){
	  uni.navigateTo({
		url:"/ulit/publish/publish"
	  })
  }else if(item.text === '联系我们'){
    // 跳转到聊天页面
    uni.navigateTo({
      url: '/pages/liaotian/liaotian'
    });
  }
};

// 登录按钮点击事件
const handleLogin = () => {
  uni.navigateTo({
    url: '/ulit/login/login'
  });
};

// 退出登录方法
const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        // 清除本地存储的token和用户信息
        uni.removeStorageSync('token');
        uni.removeStorageSync('nickname');
        
        // 更新登录状态
        checkLoginStatus();
        
        uni.showToast({
          title: '已退出登录',
          icon: 'success'
        });
      }
    }
  });
};
</script>

<style scoped>
.my-page {
  padding-bottom: 50px; /* 给底部导航留空间 */
}

/* 用户头部区域 */
.user-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  /* background: url('../static/imgicon/1.jpg') no-repeat top center; */
  background-size: cover;
}
.user-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-bottom: 10px;
}
.user-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}
.edit-info {
  font-size: 14px;
  color: #c33;
  margin-bottom: 15px;
}
.logout-btn,
.login-btn {
  background-color: #07c160;
  color: #fff;
  font-size: 14px;
  padding: 6px 25px;
  border-radius: 20px;
  border: none;
}

/* 菜单列表 */
.menu-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 15px 0;
  background-color: #fff;
}
.menu-item {
  width: 33.33%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 15px;
}
.menu-text {
  font-size: 14px;
  margin-top: 5px;
}

/* 欢迎语 */
.welcome-text {
  text-align: center;
  padding: 20px 0;
  font-size: 14px;
  color: #666;
}
.highlight {
  color: #c33;
}


</style>